<template>
  <div class="dashboard-editor-container">

    <panel-group @handleclick="tabClick" />

    <el-row style="" class="pane-content">
      <div v-if="4">
        <dv-scroll-board :config="autoTable" />
      </div>
      <div v-if="3">
        <dv-scroll-board :config="autoTable" />
      </div>
      <div v-if="2">
        <dv-scroll-board :config="autoTable" />
      </div>
      <div v-if="1">
        <dv-scroll-board :config="autoTable" />
      </div>
    </el-row>
  </div>
</template>

<script>
import PanelGroup from '../dashboard/PanelGroup'

const lineChartData = {
  newVisitis: {
    expectedData: [100, 120, 161, 134, 105, 160, 165],
    actualData: [120, 82, 91, 154, 162, 140, 145]
  },
  messages: {
    expectedData: [200, 192, 120, 144, 160, 130, 140],
    actualData: [180, 160, 151, 106, 145, 150, 130]
  },
  purchases: {
    expectedData: [80, 100, 121, 104, 105, 90, 100],
    actualData: [120, 90, 100, 138, 142, 130, 130]
  },
  shoppings: {
    expectedData: [130, 140, 141, 142, 145, 150, 160],
    actualData: [120, 82, 91, 154, 162, 140, 130]
  }
}

export default {
  name: 'Home',
  components: {
    PanelGroup
  },

  data() {
    return {
      autoTable: {},
      tabShow: 4,
      dataTable: [
        ['给对手犯规但是', '2020-02-20', '2020-09-20', '180天', '半包'],
        ['公司的法国队一头热', '2020-12-20', '2020-11-20', '181天', '全包'],
        ['合法的和肉体回避的话题', '2020-03-20', '2020-12-20', '182天', '全包'],
        ['好的匪徒条件好的话', '2020-02-04', '2020-05-20', '183天', '全包'],
        ['给对手犯规但是', '2020-02-20', '2020-09-20', '183天', '全包'],
        ['公司的法国队一头热', '2020-12-20', '2020-11-20', '180天', '半包'],
        ['合法的和肉体回避的话题', '2020-03-20', '2020-12-20', '180天', '半包'],
        ['好的匪徒条件好的话', '2020-02-04', '2020-05-20', '180天', '半包'],
        ['给对手犯规但是', '2020-02-20', '2020-09-20', '180天', '半包'],
        ['公司的法国队一头热', '2020-12-20', '2020-11-20', '180天', '半包'],
        ['合法的和肉体回避的话题', '2020-03-20', '2020-12-20', '180天', '半包'],
        ['好的匪徒条件好的话', '2020-02-04', '2020-05-20', '180天', '半包'],
        ['给对手犯规但是', '2020-02-20', '2020-09-20', '180天', '半包'],
        ['公司的法国队一头热', '2020-12-20', '2020-11-20', '180天', '半包'],
        ['合法的和肉体回避的话题', '2020-03-20', '2020-12-20', '180天', '半包'],
        ['好的匪徒条件好的话', '2020-02-04', '2020-05-20', '180天', '半包'],
        ['给对手犯规但是', '2020-02-20', '2020-09-20', '180天', '半包'],
        ['公司的法国队一头热', '2020-12-20', '2020-11-20', '180天', '半包'],
        ['合法的和肉体回避的话题', '2020-03-20', '2020-11-20', '180天', '半包'],
        ['好的匪徒条件好的话', '2020-02-04', '2020-05-20', '180天', '半包']
      ],
      headerTable: ['<span style="font-size:16px;">项目名称</span>', '<span style="font-size:16px;">开工日期</span>',
        '<span style="font-size:16px;">完工日期</span>', '<span style="font-size:16px;">工期</span>',
        '<span style="font-size:16px;">施工类型</span>'
      ],
      lineChartData: lineChartData.newVisitis
    }
  },
  mounted() {
    this.autoTable = {
      data: this.dataTable, // 表数据
      header: this.headerTable, // 表头数据
      rowNum: 15, // 表行数
      headerBGC: '#d7dde0', // 表头背景色
      oddRowBGC: '#f5f7fa', // 奇数行背景色
      evenRowBGC: '#fff', // 偶数行背景色
      waitTime: 10000, // 轮播时间间隔(ms)
      align: 'center'
    }
  },
  methods: {
    tabClick(type) {
      this.tabShow = type
    }
  }
}
</script>

<style lang="scss" scoped>
	.dashboard-editor-container {
		padding: 32px;
		background-color: rgb(240, 242, 245);
		position: relative;

		.chart-wrapper {
			background: #fff;
			padding: 16px 16px 0;
			margin-bottom: 32px;
		}
	}

	.pane-content {
		height: calc(100vh - 274px);
	}

	.dv-scroll-board {
		color: #666;
		// width: 100%;
		// height: 100%;

		.header {
			font-size: 20px;
			color: #91a0b9;
			text-align: center;
			white-space: nowrap;
		}

		::v-deep.rows .row-item {
			// font-size: 15px;
		}
	}

	@media (max-width:1024px) {
		.chart-wrapper {
			padding: 8px;
		}
	}
</style>
